<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .item {
            background-color: #b3e19d;
        }
        .box {
            width: 90%;
            margin: 0 auto;
            display: flex;
            justify-content: space-between
        }
    </style>
</head>
<body>
<div id="app">
    <div class="box">
        <!--<item v-for="i in items" :src="i.image" :title="i.name" :price="i.price"></item>-->
        <div v-for="i in items" class="item">
            <img v-bind:src="i.image"/>
            <p>{{ i.name }}</p>
            <p>{{ i.price }}</p>
        </div>
    </div>
</div>
<script src="../../js/vue.js"></script>
<script>
    console.log(Math.ceil(Math.random() * 39))
    const item = {
        props: [
            'src', 'title', 'price'
        ],
        data() {
            return {}
        },
        template: `
          <div class="item">
            <img v-bind:src="src"/>
            <p>{{ title }}</p>
            <p>{{ price }}</p>
          </div>
        `
    }

    Vue.createApp({
        data() {
            return {
                items: [
                    {
                        image: '../../images/logo.png', name: 'IPhone手机', price: 799
                    },
                    {
                        image: '../../images/logo.png', name: '遥遥领先', price: 899
                    },
                    {
                        image: '../../images/logo.png', name: '笔记本', price: 7999
                    },{
                        image: '../../images/logo.png', name: '手机壳', price: 799
                    },

                ]
            }
        },
        methods: {},
        components: {
            item
        }
    }).mount("#app")
</script>
</body>
</html>